<template>
  <view class="orderList">
    <view class="list bgRadius" @click="getDetail">
      <view class="bianhao flex flex-align flex-bt">
        <view class="left">
          <text>订单编号：</text>
          <text>202209191111111111</text>
        </view>
        <view class="right flex flex-align">
          <uni-countdown color="#FE7431" :show-day="false" :show-hour="timeInfo.testHour!=0" :hour="timeInfo.testHour" :minute="timeInfo.testMinute" :second="timeInfo.testSecond" />
          <text>后取消</text>
        </view>
      </view>
      <view class="shopList">
        <view class="shopItem flex flex-bt">
          <view class="left flex">
            <image src="@/static/shop/shop02.png"  mode="scaleToFill" />
            <view class="flex flex-direction flex-bt">
              <view class="name">麦瑞克专业级筋膜枪超乎你的想象</view>
              <view class="text">
                <view>智能变速，六档调节</view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="price">
              998 <text>礼品卡</text>
            </view>
            <view class="number">x1</view>
          </view>
        </view>
      </view>
      <view class="quanBao flex flex-align flex-end">
        <view class="right flex flex-align">
          <view class="name">价值15元优惠券包</view>
          <view class="value">
            <uni-icons type="right" size="16" color="#fff"></uni-icons>
          </view> 
        </view>
      </view>
      <view class="orderbot">
        <view class="zhuangtai flex flex-align flex-end">
          <view class="name">待付款：¥99.98</view>
        </view>
        <view class="flex flex-align flex-end">
          <view class="btns flex flex-align flex-center">立即支付</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getTime, menuJump } from '@/utils/tools'
import { onMounted, reactive, ref } from 'vue'
const timeCount = ref(3000)
const timeInfo = ref<Object>({
  testHour:0,
  testMinute:0,
  testSecond:0
})
onMounted(() => {
  timeInfo.value = getTime(timeCount)
})
const dataInfo = defineProps({
  title: {
    type: String,
    default: ''
  },
  type: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['submit', 'update:show'])


onMounted(() => {})
async function open() {
  updateShow(true)
}
function getDetail() {
  menuJump({is_tab: false,link: '/pages/orderList/orderDetail',link_type: 1})
}

function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.orderList{padding:0rpx 20rpx;
  .list{
    .bianhao{
     .left{font-size: 26rpx;color: #969799;}
      .right{font-size: 26rpx;color: #FE7431;
      }
    }
    .quanBao{background:url('/static/shop/shop05.png');border-radius: 50rpx;color: #fff;padding-left: 20rpx;margin:20rpx 0 0;
      background-size: 100% 100%;
      .flex{padding: 14rpx 10rpx 14rpx 0;
        .name{font-size: 24rpx;color: #fff;}
        .value{font-size: 24rpx;color: #FE7431;}
        }
      }
    .shopList{
      .shopItem{padding: 20rpx 0;
        .left{
          image{width: 170rpx;height: 170rpx;}
          .flex-direction{margin-left: 20rpx;
            .name{font-size: 28rpx;color: #333;width: 330rpx;font-weight: bold;}
            .text{font-size: 24rpx;color: #969799;margin-top: 10rpx;
            view{background: #F5F6F7;border-radius: 40rpx;padding: 4rpx 20rpx;display: inline-block;}
            }
          }
        }
      .right{text-align: right;font-weight: bold;
        .price{font-size: 32rpx;color: #323233;
          text{font-size: 24rpx;}
        }
        .number{font-size: 24rpx;color: #969799;margin-top: 10rpx;}
      }
      }
    }
   .orderbot{padding: 20rpx 0 0;
     .zhuangtai{font-size: 28rpx;color: #323233;
       .name{margin-right: 20rpx;}
      }
      .btns{width: 160rpx;height: 60rpx;text-align: center;background: #FE7431;border-radius: 40rpx;color: #fff;margin-top: 20rpx;}

    }
  }
}

</style>
